<!--左边导航-->
<template>
    <div>
      <div class="left-nav" v-if="navData&&navData[0].subNavbars.length>0">
        <div class="home-nav">{{navData[0].name}}</div>
        <ul>
          <li v-for="(item,index) in navData[0].subNavbars" :key="index">
            <div class="nav-title">
              <a class="nav-title" href="./introduction.html">{{item.name}}</a>
              <ul>
                <li v-for="(itemNav,index) in item.subNavbars" class="nav-title-2"><a href="./territory.html">{{itemNav.name}}</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name:'leftNav',
        props:['navData'],
        created(){
            // console.log(this.navData)
        },
        methods:{

        }
    }
</script>

<style scoped>
    .left-nav ul li{
        list-style: none;
        width:250px;
        padding-left: 40px;
        position: relative;
        margin-bottom: 30px;
    }
      .left-nav ul li .nav-title{
         color:#000;
         font-weight: bold;
         font-size: 16px;
     }
      .left-nav ul li .nav-title-2{
         font-size: 14px;
         color:#000;
         padding-left: 10px;
          position: relative;
          margin-top: 30px;
         margin-bottom: 30px;
     }
      .left-nav ul li .nav-title-2 a{
         color:#000;
     }
      .left-nav ul li.active::before{
         content:'';
         display: inline-block;
         width: 14px;
         height: 14px;
         position: absolute;
         left:0px;
         top:4px;
         /*background:url(../img/right.png) no-repeat;*/
         background-size: 14px 14px;
     }
      .left-nav ul li .active2{
         color:red;
     }
     
      .left-nav ul li.active .nav-title{
         color:red;
     }
     .left-nav ul li.active2 a{
         color:red;
     }
</style>